<template>
  <div>
    <van-sticky>
      <van-tabs
        v-model:active="active"
        shrink
        sticky
        @click-tab="onClickTab"
        color="#59b5fc"
        class="tab"
      >
        <van-tab title="关注" :disabled="!islogin"> </van-tab>
        <van-tab title="圈子">
          <div class="my-topic">
            我加入的圈子
            <div class="topic-list">
              <div
                v-for="item in topics"
                :key="item.id"
                class="topic-item"
                @click="handelTopicItemClick(item.title)"
              >
                <van-image width="1rem" height="1rem" round :src="item.img" />
                {{ item.title }}
              </div>
              <div class="topic-item" @click="handelAddTopic">
                <van-image
                  width="1rem"
                  height="1rem"
                  round
                  :src="getAddTopicImg()"
                />
                创建圈子
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="最新"> </van-tab>
      </van-tabs>
    </van-sticky>
    <div ref="postListDOM">
      <PostList ref="postListComp" :postType="active"></PostList>
    </div>
  </div>
</template>

<script setup lang="ts">
import PostList from '@/components/post/postList.vue'
import { computed, reactive, ref, toRefs, watch, onMounted } from 'vue'
import { getTopics } from '@/api/service'
import { baseUrl } from '@/api/request'
import { isLogin } from '@/utils/isLogin'
import { useRouter } from 'vue-router'
import { useLocalStorage } from '@/utils/useLocalStorage'
const router = useRouter()
const getAddTopicImg = () => {
  return new URL('../../assets/add-topic.png', import.meta.url).href
}
const active = ref(2)
const onClickTab = ({ title }) => {
  console.log(title, active.value)
  
}
const topicData = ref()
const topics = ref([])
const islogin = ref(false)
const followList = ref([])
//子组件
const postListComp = ref(null)
onMounted(() => {
  if (isLogin()) {
    islogin.value = true
    followList.value = JSON.parse(useLocalStorage.get('userInfo')).follows
  }
  
})

getTopics().then((res: any) => {
  topicData.value = res.data

  topicData.value.map((item) => {
    // console.log(item);
    topics.value.push({
      id: item.id,
      title: item.name,
      img: `${baseUrl}/images/${item.avatar}`,
    })
  })
})
const handelAddTopic = () => {
  router.push('addtopic')
}

const postListDOM = ref(null)
watch(active, (newValue) => {


  if (newValue == 1) {
    console.log(postListDOM.value)
    postListDOM.value.style.marginTop = '30vw'
  } else {
    postListDOM.value.style.marginTop = '6vw'
  }
  if (newValue ==0) {
    postListComp.value.followList = followList.value
  } else {
    postListComp.value.followList = []
  }
  postListComp.value.onRefresh()
})

const handelTopicItemClick = (e) => {
  console.log(e)
  router.push(`postlistlayout?topicName=${e}`)
}
</script>
<style lang="scss" scoped>
.my-topic {
  padding: 0 6vw 0 6vw;
  color: #666;
  height: 30vw;
  font-size: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #fff;
}
.tab {
  height: 10vw;
}
.topic-list {
  overflow: hidden;
  display: flex;
  // height: 80%;
}
.topic-item {
  display: flex;
  margin-left: 0.3rem;
  height: 20vw;
  width: 20vw;
  flex-direction: column;
}
h1 {
  display: block;
  font-size: 40px;
  text-align: center;
  padding: 20px 0;
}
ul {
  li {
    display: block;
    font-size: 20px;
    padding: 20px 0;
    text-align: center;
  }
}
</style>
